<template>
  	<view class="article-poster">
	<!-- <canvas canvas-id="myCanvas" style="width:100%;height:200rpx;"></canvas> -->
		<canvas v-if="!path"  :style="{ width: canvasW + 'px', height: canvasH + 'px' }" :canvas-id="canvasId"  ></canvas>
		<image
			class="haibao"
			:src="path"
			mode="widthFix"
			@click="fd(path)"
		/>
  </view>
</template>

<script>
import Vue from 'vue';
import dkCanvas from "./canvas"
import canvas from './canvas';
console.log(dkCanvas);
export default Vue.extend({
  name: "article-poster",
  props: {
    item:{}
  },
  data() {
    return {
      canvasId:"articlePoster",
      canvasW:375,
      canvasH:320,
      path:""
    }
  },
  computed: {},
  methods: {
	saveCanvas(){
		this.$parent.close()

		uni.saveImageToPhotosAlbum({
			filePath: this.path,
			success:  ()=> {
				console.log('save success');
				uni.showToast({
					title: '图片保存成功'
				})
				setTimeout(() => {
					this.$parent.close()
				}, 1000);
			},
			fail:(err)=> {
					// this.$parent.close()
					this.tips.tips("您拒绝了图片保存权限")
			}
		});
	}

  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
	console.log(this.item);
	let padding=20
	// this.item.content+="测试文字是否超出的显示样式，测试文字是否超出的显示样式，测试文字是否超出的显示样式，记得删掉哦"
	// this.item.content += "测试文字是否超出的显示样式，测试文字是否超出的显示样式，测试文字是否超出的显示样式，记得删掉哦"
	// this.item.image=null
	if (this.item.image) {
		this.canvasH = 450
	}
	const canvasConfig={
		id: this.canvasId,
		width: this.canvasW,
		height: this.canvasH,
		list: [
				{
					type: "image",
					url:this.$root.fileUrl+( this.canvasH == 450? "share_bg.png": "share_bgs.png"),
					// url: "https://test.fkynet.net/wximages/share_bgs.png",
					style: {
						x:0,
						y: 0,
						width: this.canvasW,
						height: this.canvasH,
					}
				},

			{
				type: "image",
				url:this.item.avatar+"",
				style:{
					x:padding,
					y: padding,
					width:70,
					height:70,
				}
			},
			{
				type: "text",
				content: this.item.nickname,
				x:padding+ 80,
				y:padding+ 30,
				color:"#000",
				fontSize:20
			},
			{
				type: "text",
				content: this.item.createtime,
				x: padding + 80,
				y: padding + 60,
				color: "#999",
				fontSize: 12
			},
			// {
			// 	type: "box",
			// 	x: padding,
			// 	y: 110,
			// 	width:this.canvasW-padding*2,
			// 	height: 20+14+ this.item.content.length,
			// 	background:"#fff"
			// },
			{
				type: "text",
				content: this.item.content,
				x: padding,
				y:120,
				color: "#000",
				width: this.canvasW - padding * 2-20,
				fontSize: 14
			},
			{
				type: "image",
				url: this.item.code,
				isCircle: true,
				style: {
					x: this.canvasW-padding-80+2,
					y: this.canvasH-padding-70+2,
					width: 70,
					height: 70,
					borderRadius:70
				}
			},
			
			
		]
	}
	if (this.item.image) {
		this.item.image.map((item,i)=>{
			if (i<3) {
				canvasConfig.list.push({
						type: "image",
						url: item,
						isCircle: true,
						style: {
							x: padding+i*(105+5),
							y: 120 + 70,
							width: 105,
							height: 105,
							borderRadius: 20

						}
					},)
			}
		})
	}


		canvasConfig.height = this.canvasH
		console.log(canvasConfig);

    	dkCanvas.startDraw(canvasConfig,this).then(res=>{

			console.log(res);
			 uni.canvasToTempFilePath({ // 保存canvas为图片
				canvasId: this.canvasId,
				quality: 1,
				complete: (res) => {
					// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
					console.log(res)
					this.path = res.tempFilePath
					console.log(this.path);
				},
			}, this)
		})

		const context = uni.createCanvasContext('myCanvas', this)
		const x = 20 // 圆角矩形左上角横坐标
		const y = 20 // 圆角矩形左上角纵坐标
		const w = 80 // 圆角矩形宽度
		const h = 80 // 圆角矩形高度
		const r = 10 // 圆角半径
		context.beginPath()
		context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
		context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
		
		context.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
		context.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
		context.closePath()

		// context.lineTo(x + w - r, y)
		// context.lineTo(x + w, y + h - r)
		// context.lineTo(x + r, y + h)
		context.setFillStyle('#f00')
		context.fill()
		// context.draw()



  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
}) 
</script>

<style scoped>
  canvas{
    display: block !important;
  }
</style>